<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>物业管理平台</title>
  <link rel="stylesheet" href="css/mCustomScrollbar.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery.min.js"></script>
</head>

<body class="bg-gray">
  <div class="breadcrumb">
    您的位置：
    <a href="javascript:void(0)">首页</a>
    <span class="separator">></span>
    <a href="javascript:void(0)">租户信息</a>
  </div>
  <div class="tenantInfo">
    <div class="row clearfix">
      <div class="left">
        <!-- 卡片s -->
        <div class="card clearfix">
          <div class="card-item">
            <div class="card-wrap">
              <div class="icon"><img src="images/card_icon_01.png" alt=""></div>
              <div class="name">本月应收<span class="unit">(元)</span></div>
              <div class="value f-blue">85,000</div>
            </div>
          </div>
          <div class="card-item">
            <div class="card-wrap">
              <div class="icon"><img src="images/card_icon_02.png" alt=""></div>
              <div class="name">本月已收<span class="unit">(元)</span></div>
              <div class="value f-green">80,000</div>
            </div>
          </div>
          <div class="card-item">
            <div class="card-wrap">
              <div class="icon"><img src="images/card_icon_03.png" alt=""></div>
              <div class="name">本月已缴<span class="unit">(户)</span></div>
              <div class="value f-orange">179</div>
            </div>
          </div>
          <div class="card-item">
            <div class="card-wrap">
              <div class="icon"><img src="images/card_icon_04.png" alt=""></div>
              <div class="name">本月未缴<span class="unit">(户)</span></div>
              <div class="value f-red">136</div>
            </div>
          </div>
        </div>
        <!-- 卡片e -->
        <!-- 租户情况s -->
        <!-- <div class="zhqk col-04"> -->
        <div class="zhqk">
          <div class="zhqk-wrap clearfix">
            <div class="col">
              <div class="title">A栋租户情况</div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_01.png" alt=""></div>
                <div class="value">65<span class="unit">户</span></div>
                <div class="name">在租单元</div>
              </div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_02.png" alt=""></div>
                <div class="value">5<span class="unit">户</span></div>
                <div class="name">空闲单元</div>
              </div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_03.png" alt=""></div>
                <div class="value">27,000<span class="unit">元</span></div>
                <div class="name">本月已收金额</div>
              </div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_04.png" alt=""></div>
                <div class="value">128<span class="unit">户</span></div>
                <div class="name">本月已缴租户</div>
              </div>
            </div>
            <div class="col">
              <div class="title">B栋租户情况</div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_01.png" alt=""></div>
                <div class="value">65<span class="unit">户</span></div>
                <div class="name">在租单元</div>
              </div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_02.png" alt=""></div>
                <div class="value">5<span class="unit">户</span></div>
                <div class="name">空闲单元</div>
              </div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_03.png" alt=""></div>
                <div class="value">27,000<span class="unit">元</span></div>
                <div class="name">本月已收金额</div>
              </div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_04.png" alt=""></div>
                <div class="value">128<span class="unit">户</span></div>
                <div class="name">本月已缴租户</div>
              </div>
            </div>
            <div class="col">
              <div class="title">C栋租户情况</div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_01.png" alt=""></div>
                <div class="value">65<span class="unit">户</span></div>
                <div class="name">在租单元</div>
              </div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_02.png" alt=""></div>
                <div class="value">5<span class="unit">户</span></div>
                <div class="name">空闲单元</div>
              </div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_03.png" alt=""></div>
                <div class="value">27,000<span class="unit">元</span></div>
                <div class="name">本月已收金额</div>
              </div>
              <div class="item">
                <div class="icon"><img src="images/zhqk_icon_04.png" alt=""></div>
                <div class="value">128<span class="unit">户</span></div>
                <div class="name">本月已缴租户</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 租户情况e -->
      </div>
      <div class="right">
        <!-- 涨租信息展示s -->
        <div class="zzxx">
          <div class="titleBar tabs-bar">
            <ul>
              <li class="selected">待涨租信息预警</li>
              <li>已涨租信息展示</li>
            </ul>
          </div>
          <!-- 待涨租信息预警表格s -->
          <div class="tabs">
            <div class="table">
              <div class="thead">
                <ul>
                  <li>
                    <p>楼栋</p>
                    <p>单元号</p>
                    <p>租户名称</p>
                    <p>涨租时间</p>
                    <p>操作</p>
                </ul>
              </div>
              <div class="tbody scrollbar">
                <ul>
                  <li>
                    <p>A栋</p>
                    <p>101,102,103</p>
                    <p>陈怡宣</p>
                    <p>2020.09.19</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>B栋</p>
                    <p>209</p>
                    <p>李伟泽</p>
                    <p>2020.09.19</p>
                    <p><a href="javascript:void(0)" class="btn ">确认涨租</a></p>
                  </li>
                  <li>
                    <p>c栋</p>
                    <p>305</p>
                    <p>谢天佳</p>
                    <p>2020.10.26</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>A栋</p>
                    <p>201,202</p>
                    <p>许金欣</p>
                    <p>2020.10.26</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>B栋</p>
                    <p>510</p>
                    <p>蒋文龙</p>
                    <p>2020.12.31</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>C栋</p>
                    <p>301,302</p>
                    <p>陈沁怡</p>
                    <p>2020.12.31</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>A栋</p>
                    <p>101,102,103</p>
                    <p>陈怡宣</p>
                    <p>2020.09.19</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>B栋</p>
                    <p>209</p>
                    <p>李伟泽</p>
                    <p>2020.09.19</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>c栋</p>
                    <p>305</p>
                    <p>谢天佳</p>
                    <p>2020.10.26</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>A栋</p>
                    <p>201,202</p>
                    <p>许金欣</p>
                    <p>2020.10.26</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>B栋</p>
                    <p>510</p>
                    <p>蒋文龙</p>
                    <p>2020.12.31</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                  <li>
                    <p>C栋</p>
                    <p>301,302</p>
                    <p>陈沁怡</p>
                    <p>2020.12.31</p>
                    <p><a href="javascript:void(0)" class="btn">确认涨租</a></p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 待涨租信息预警表格e -->
          <!-- 已涨租信息展示表格s -->
          <div class="tabs none">
            <div class="table">
              <div class="thead">
                <ul>
                  <li>
                    <p>楼栋</p>
                    <p>单元号</p>
                    <p>租户名称</p>
                    <p>涨租时间</p>
                    <p>状态</p>
                </ul>
              </div>
              <div class="tbody scrollbar">
                <ul>
                  <li>
                    <p>A栋</p>
                    <p>101,102,103</p>
                    <p>陈怡宣</p>
                    <p>2020.09.19</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>B栋</p>
                    <p>209</p>
                    <p>李伟泽</p>
                    <p>2020.09.19</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>c栋</p>
                    <p>305</p>
                    <p>谢天佳</p>
                    <p>2020.10.26</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>A栋</p>
                    <p>201,202</p>
                    <p>许金欣</p>
                    <p>2020.10.26</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>B栋</p>
                    <p>510</p>
                    <p>蒋文龙</p>
                    <p>2020.12.31</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>C栋</p>
                    <p>301,302</p>
                    <p>陈沁怡</p>
                    <p>2020.12.31</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>A栋</p>
                    <p>101,102,103</p>
                    <p>陈怡宣</p>
                    <p>2020.09.19</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>B栋</p>
                    <p>209</p>
                    <p>李伟泽</p>
                    <p>2020.09.19</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>c栋</p>
                    <p>305</p>
                    <p>谢天佳</p>
                    <p>2020.10.26</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>A栋</p>
                    <p>201,202</p>
                    <p>许金欣</p>
                    <p>2020.10.26</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>B栋</p>
                    <p>510</p>
                    <p>蒋文龙</p>
                    <p>2020.12.31</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                  <li>
                    <p>C栋</p>
                    <p>301,302</p>
                    <p>陈沁怡</p>
                    <p>2020.12.31</p>
                    <p class="f-darkRed">已涨租</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 已涨租信息展示表格e -->
        </div>
        <!-- 涨租信息展示e -->
      </div>
    </div>
    <div class="echarts clearfix">
      <div class="echartsBox">
        <!-- 应收租金一览 -->
        <div id="chartOne" style="height:344px; width:100%;"></div>
      </div>
      <div class="echartsBox">
        <!-- 实收租金一览 -->
        <div id="chartTwo" style="height:344px; width:100%;"></div>
      </div>
      <div class="echartsBox">
        <!-- 十大租户收租情况 -->
        <div id="chartThree" style="height:344px; width:100%;"></div>
      </div>
      <div class="echartsBox">
        <!-- 涨租情况一览 -->
        <div id="chartFour" style="height:344px; width:100%;"></div>
      </div>
      <div class="echartsBox">
        <!-- 租户人数一览 -->
        <div id="chartFive" style="height:344px; width:100%;"></div>
      </div>
      <div class="echartsBox">
        <!-- 出租单元一览 -->
        <div id="chartSix" style="height:344px; width:100%;"></div>
      </div>
    </div>
  </div>
  <script src="js/mCustomScrollbar.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <script>
    //滑动条美化
    $(".scrollbar").mCustomScrollbar({
      theme: "minimal-dark"
    });
    //tabs切换
    $(".tabs-bar li").click(function () {
      var index = $(this).index(".tabs-bar li");
      $(this).addClass("selected").siblings().removeClass("selected");
      $($(".tabs")[index]).show().siblings(".tabs").hide();
    });
    //应收租金一览
    var chart = echarts.init(document.getElementById("chartOne"));
    var option = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          var result = params[0].name;
          params.forEach(function (item) {
            result += "</br>" + item.marker + " " + item.seriesName + " : " + item.value + "元 ";
          });
          return result;
        },
        axisPointer: {
          type: 'none'
        }
      },
      legend: {
        x: 'right',
        y: 'top',
        itemGap: 16,
        padding: [23, 20, 0, 0],
        data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
        textStyle: {
          color: '#555',
          fontSize: '13',
        }
      },
      grid: {
        show: 'true',
        borderWidth: '0',
        left: '24',
        right: '20',
        top: '72',
        bottom: '40',
        containLabel: true
      },
      toolbox: {
        show: false
      },
      calculable: true,
      xAxis: [{
        type: 'category',
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          //	rotate: 35,
          interval: 0,
          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
          '10月', '11月', '12月'
        ]
      }],
      yAxis: [{
        type: 'value',
        name: '应收租金一览',
        nameTextStyle: {
          color: "#333333",
          padding: [0, 0, 20, -20],
          fontSize: 16,
          fontWeight: 700,
        },
        splitLine: {
          lineStyle: {
            color: '#f4f4f4',
          }
        },
        axisLabel: {
          formatter: '{value}元',
          show: true,

          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }],
      series: [{
        name: '全园区',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#4c83fd",
            lineStyle: {
              width: 1.5,
              color: "#4c83fd",
            }
          }
        },
        data: [1767, 1296, 1484, 1068, 2188, 1264, 1582, 1279, 1588, 1265, 1888, 1067],
      }, {
        name: 'A栋',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#f9ab22",
            lineStyle: {
              width: 1.5,
              color: "#f9ab22",
            }
          }
        },
        data: [379, 88, 365, 488, 367, 567, 396, 584, 368, 588, 364, 482, ],
      }, {
        name: 'B栋',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#7dc855",
            lineStyle: {
              width: 1.5,
              color: "#7dc855",
            }
          }
        },
        data: [279, 348, 265, 688, 237, 467, 256, 484, 268, 488, 264, 382, ],
      }, {
        name: 'C栋',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#fe5e5e",
            lineStyle: {
              width: 1.5,
              color: "#fe5e5e",
            }
          }
        },
        data: [179, 248, 165, 288, 137, 367, 156, 384, 768, 388, 164, 282, ],
      }, {
        name: 'D栋',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#b07cc5",
            lineStyle: {
              width: 1.5,
              color: "#b07cc5",
            }
          }
        },
        data: [79, 548, 65, 188, 37, 267, 56, 284, 68, 288, 64, 182, ],
      }]
    };
    chart.setOption(option)
    //实收租金一览
    var chart2 = echarts.init(document.getElementById("chartTwo"));
    var option2 = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          var result = params[0].name;
          params.forEach(function (item) {
            result += "</br>" + item.marker + " " + item.seriesName + " : " + item.value + "元 ";
          });
          return result;
        },
        axisPointer: {
          type: 'none'
        }
      },
      legend: {
        x: 'right',
        y: 'top',
        itemGap: 16,
        padding: [23, 20, 0, 0],
        data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
        textStyle: {
          color: '#555',
          fontSize: '13',
        }
      },
      grid: {
        show: 'true',
        borderWidth: '0',
        left: '24',
        right: '20',
        top: '72',
        bottom: '40',
        containLabel: true
      },
      toolbox: {
        show: false
      },
      calculable: true,
      xAxis: [{
        type: 'category',
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          //	rotate: 35,
          interval: 0,
          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
          '10月', '11月', '12月'
        ]
      }],
      yAxis: [{
        type: 'value',
        name: '实收租金一览',
        nameTextStyle: {
          color: "#333333",
          padding: [0, 0, 20, -20],
          fontSize: 16,
          fontWeight: 700,
        },
        splitLine: {
          lineStyle: {
            color: '#f4f4f4',
          }
        },
        axisLabel: {
          formatter: '{value}元',
          show: true,

          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }],
      series: [{
        name: '全园区',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#4c83fd",
            lineStyle: {
              width: 1.5,
              color: "#4c83fd",
            }
          }
        },
        data: [1767, 1296, 1484, 1068, 2188, 1264, 1582, 1279, 1588, 1265, 1888, 1067],
      }, {
        name: 'A栋',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#f9ab22",
            lineStyle: {
              width: 1.5,
              color: "#f9ab22",
            }
          }
        },
        data: [379, 88, 365, 488, 367, 567, 396, 584, 368, 588, 364, 482, ],
      }, {
        name: 'B栋',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#7dc855",
            lineStyle: {
              width: 1.5,
              color: "#7dc855",
            }
          }
        },
        data: [279, 348, 265, 688, 237, 467, 256, 484, 268, 488, 264, 382, ],
      }, {
        name: 'C栋',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#fe5e5e",
            lineStyle: {
              width: 1.5,
              color: "#fe5e5e",
            }
          }
        },
        data: [179, 248, 165, 288, 137, 367, 156, 384, 768, 388, 164, 282, ],
      }, {
        name: 'D栋',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#b07cc5",
            lineStyle: {
              width: 1.5,
              color: "#b07cc5",
            }
          }
        },
        data: [79, 548, 65, 188, 37, 267, 56, 284, 68, 288, 64, 182, ],
      }]
    };
    chart2.setOption(option2)
    //十大租户收租情况
    var chart3 = echarts.init(document.getElementById("chartThree"));
    var option3 = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          var name = params[0].name + "</br>";
          var str = '';
          var series_colors = ['#538ffe'];
          for (var i = 0; i < params.length; i++) {
            params[i].marker =
              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
              series_colors[i] + "'></span>";
            str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + "元<br/>";
          }
          return name + str;
        },
      },
      grid: {
        show: 'true',
        borderWidth: '0',
        left: '24',
        right: '20',
        top: '72',
        bottom: '40',
        containLabel: true
      },
      toolbox: {
        show: false
      },
      calculable: true,
      xAxis: [{
        type: 'category',
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          //	rotate: 35,
          interval: 0,
          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        data: ['陈沁怡', '李俊楠', '吴迪阳', '陈齐羽', '谢天佳', '李志涛', '许金欣', '陆军达', '吴莺音',
          '李黎昕'
        ]
      }],
      yAxis: [{
        type: 'value',
        name: '十大租户收租情况',
        nameTextStyle: {
          color: "#333333",
          padding: [0, 0, 20, 7],
          fontSize: 16,
          fontWeight: 700,
        },
        splitLine: {
          lineStyle: {
            color: '#f4f4f4',
          }
        },
        axisLabel: {
          formatter: '{value}元',
          show: true,

          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }],
      series: [{
        name: '收租金额',
        type: 'bar',
        barWidth: 14,
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                  offset: 0,
                  color: '#5784ff'
                },
                {
                  offset: 1,
                  color: '#a0b9ff'
                }
              ]
            )
          }
        },
        data: [1767, 1496, 1384, 1268, 1188, 1064, 982, 879, 788, 665],
      }]
    };
    chart3.setOption(option3)
    //涨租情况一览
    var chart4 = echarts.init(document.getElementById("chartFour"));
    var option4 = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          var name = params[0].name + "</br>";
          var str = '';
          var series_colors = ['#538ffe', '#ff6767'];
          var unit = ['元', '户'];
          for (var i = 0; i < params.length; i++) {
            params[i].marker =
              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
              series_colors[i] + "'></span>";
            str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + unit[i] + "<br/>";
          }
          return name + str;
        },
      },
      legend: {
        x: 'right',
        y: 'top',
        itemGap: 16,
        padding: [23, 20, 0, 0],
        data: ['增收情况', '涨租户数'],
        textStyle: {
          color: '#555',
          fontSize: '13',
        }
      },
      grid: {
        show: 'true',
        borderWidth: '0',
        left: '24',
        right: '20',
        top: '72',
        bottom: '40',
        containLabel: true
      },
      toolbox: {
        show: false
      },
      calculable: true,
      xAxis: [{
        type: 'category',
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          //	rotate: 35,
          interval: 0,
          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
          '10月', '11月', '12月'
        ]
      }],
      yAxis: [{
        type: 'value',
        name: '涨租情况一览',
        nameTextStyle: {
          color: "#333333",
          padding: [0, 0, 20, 7],
          fontSize: 16,
          fontWeight: 700,
        },
        splitLine: {
          lineStyle: {
            color: '#f4f4f4',
          }
        },
        axisLabel: {
          formatter: '{value}',
          show: true,

          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }],
      series: [{
        name: '增收情况',
        type: 'bar',
        barWidth: 14,
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                  offset: 0,
                  color: '#5784ff'
                },
                {
                  offset: 1,
                  color: '#a0b9ff'
                }
              ]
            )
          }
        },
        data: [1767, 1296, 1484, 1068, 2188, 1264, 1582, 1279, 1588, 1265, 1888, 1067],
      }, {
        name: '涨租户数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          normal: {
            color: "#fe5e5e",
            lineStyle: {
              width: 2,
              color: "#fe5e5e",
            }
          }
        },
        data: [179, 248, 165, 288, 137, 367, 156, 384, 768, 388, 164, 282, ],
      }]
    };
    chart4.setOption(option4)
    //租户人数一览
    //出租单元一览
    var chartSix = echarts.init(document.getElementById("chartSix"));
    var option6 = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          var name = params[0].name + "</br>";
          var str = '';
          var series_colors = ['#538ffe', '#ff6767', '#7dc855', '#fe5e5e', '#b07cc5'];
          for (var i = 0; i < params.length; i++) {
            params[i].marker =
              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
              series_colors[i] + "'></span>";
            str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + "户<br/>";
          }
          return name + str;
        },
      },
      legend: {
        x: 'right',
        y: 'top',
        itemGap: 16,
        padding: [23, 20, 0, 0],
        data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
        textStyle: {
          color: '#555',
          fontSize: '13',
        }
      },
      grid: {
        show: 'true',
        borderWidth: '0',
        left: '24',
        right: '20',
        top: '72',
        bottom: '40',
        containLabel: true
      },
      toolbox: {
        show: false
      },
      calculable: true,
      xAxis: [{
        type: 'category',
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          //	rotate: 35,
          interval: 0,
          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
          '10月', '11月', '12月'
        ]
      }],
      yAxis: [{
        type: 'value',
        name: '出租单元一览',
        nameTextStyle: {
          color: "#333333",
          padding: [0, 0, 20, 5],
          fontSize: 16,
          fontWeight: 700,
        },
        splitLine: {
          lineStyle: {
            color: '#f4f4f4',
          }
        },
        axisLabel: {
          formatter: '{value}',
          show: true,

          textStyle: {
            color: '#333',
            fontSize: 13,
            fontWeight: 0,
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }],
      series: [{
        name: '全园区',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: "#5784ff",
            lineStyle: {
              width: 1.5,
              color: "#5784ff",
            }
          }
        },
        data: [767, 996, 884, 1068, 1088, 964, 1082, 979, 888, 965, 788, 1067],
      }, {
        name: 'A栋',
        type: 'bar',
        barWidth: 7,
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                  offset: 0,
                  color: '#f9ab22'
                },
                {
                  offset: 1,
                  color: '#ffcd75'
                }
              ]
            )
          }
        },
        data: [379, 288, 365, 488, 367, 567, 396, 584, 368, 588, 364, 482, ],
      }, {
        name: 'B栋',
        type: 'bar',
        barWidth: 7,
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                  offset: 0,
                  color: '#7dc855'
                },
                {
                  offset: 1,
                  color: '#abea8a'
                }
              ]
            )
          }
        },
        data: [279, 348, 265, 688, 237, 467, 256, 484, 268, 488, 264, 382, ],
      }, {
        name: 'C栋',
        type: 'bar',
        barWidth: 7,
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                  offset: 0,
                  color: '#fe5e5e'
                },
                {
                  offset: 1,
                  color: '#ff9494'
                }
              ]
            )
          }
        },
        data: [179, 248, 165, 288, 137, 367, 156, 384, 268, 388, 164, 282, ],
      }, {
        name: 'D栋',
        type: 'bar',
        barWidth: 7,
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                  offset: 0,
                  color: '#b07cc5'
                },
                {
                  offset: 1,
                  color: '#d1a3e3'
                }
              ]
            )
          }
        },
        data: [79, 548, 165, 188, 37, 267, 256, 284, 168, 288, 264, 182, ],
      }, ]
    };
    chartSix.setOption(option6)
    window.addEventListener("resize", function () {
      chart.resize();
      chart2.resize();
      chart3.resize();
      chart4.resize();
      chart5.resize();
      chart6.resize();
    });
  </script>
</body>
</html>
